<template>
  <div class="tmpl">
    <h1>Baz</h1>
    <h1>兄弟组件通信为{{brotherMsg}}</h1>
    <slot name="header" :user="user">
      {{ user.name }}
    </slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

<script>
import EventHandler from '@/assets/js/EventHandler.js'
export default {
  name: 'Baz',
  mounted () {
    var that = this
    EventHandler.$on('showMsg', function (data) {
      that.brotherMsg = data
    })
  },
  data () {
    return {
      brotherMsg: '',
      user: {
        name: '李四',
        age: 15
      }
    }
  }
}
</script>

<style scoped>
h1 {
  font-weight: normal;
}
.tmpl {
  border: 1px solid #333;
  padding: 30px;
  margin-top: 30px;
}
</style>
